<template>
  <div class="app-container">
    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column label="申请人ID" prop="id" align="center" width="100px">
        <template slot-scope="{ row }">
          <span>{{ row.applyerId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="申请人姓名" min-width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.applyerName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="设备ID" width="100px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.deviceId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="设备名称" min-width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.deviceName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="申请时间" min-width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.applyTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="申请描述" min-width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.applyContent }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button size="mini" type="success" @click="handlePass(row.applyerId)">
            通过
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination total="5" />
  </div>
</template>

<script>
import { fetchList } from "@/api/apply";
import Pagination from "@/components/Pagination";
export default {
  components: {
    Pagination,
  },
  methods: {
    handlePass(id) {
      console.log(id);
      var token = this.$gdc("token");

      this.$gd(
        "/api/apply/pass",
        {
          id: id,
        },
        token
      ).then((res) => {
        console.log(res);
        if (res.data.code == "100") {
          this.$message("申请通过");
        } else {
          this.$message(res.data.payload);
        }
      });
    },
    loadList() {
      fetchList().then((res) => {
        this.list = res.data;
      });
    },
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.loadList();
  },
};
</script>



<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
